/** light theme */
$light-bg-primary: #f5f8fa;
$light-bg-high: #ffffff;
$light-bg-shadow: #dddfe1;
$light-bg-active1: #dddfe1;
$light-bg-active2: #ffffff;

$light-text-active: #f857a6;
$light-text-light: #ffffff;
$light-text-primary: #3e3e5f;
$light-text-low: #aeacb1;
$light-text-stress: #14281D;

$light-border-primary: #e1e4e8;
$light-border-secondary: #ebedef;


/** dark theme */
$dark-bg-primary: #1e2428;
$dark-bg-high: #303a40;
$dark-bg-shadow: #0c0e10;
$dark-bg-active1: #1b2024;
$dark-bg-active2: #20272b;

$dark-text-active: #ca5388;
$dark-text-light: #d7dfe6;
$dark-text-primary: #adbac7;
$dark-text-low: #444c56;
$dark-text-stress: #cdd9e5;

$dark-border-primary: #444c56;
$dark-border-secondary: #373e47;

:root.theme-light {
  --theme-bg-primary: #{$light-bg-primary};
  --theme-bg-high: #{$light-bg-high};
  --theme-bg-shadow: #{$light-bg-shadow};
  --theme-bg-actvie1: #{$light-bg-active1};
  --theme-bg-actvie2: #{$light-bg-active2};

  --theme-text-active: #{$light-text-active};
  --theme-text-light: #{$light-text-light};
  --theme-text-primary: #{$light-text-primary};
  --theme-text-low: #{$light-text-low};
  --theme-text-stress: #{$light-text-stress};

  --theme-border-primary: #{$light-border-primary};
  --theme-border-secondary: #{$light-border-secondary};
}

:root.theme-dark {
  --theme-bg-primary: #{$dark-bg-primary};
  --theme-bg-high: #{$dark-bg-high};
  --theme-bg-shadow: #{$dark-bg-shadow};
  --theme-bg-actvie1: #{$dark-bg-active1};
  --theme-bg-actvie2: #{$dark-bg-active2};

  --theme-text-active: #{$dark-text-active};
  --theme-text-light: #{$dark-text-light};
  --theme-text-primary: #{$dark-text-primary};
  --theme-text-low: #{$dark-text-low};
  --theme-text-stress: #{$dark-text-stress};
  
  --theme-border-primary: #{$dark-border-primary};
  --theme-border-secondary: #{$dark-border-secondary};
}

@media (prefers-color-scheme: light) {
  :root {
    --theme-bg-primary: #{$light-bg-primary};
    --theme-bg-high: #{$light-bg-high};
    --theme-bg-shadow: #{$light-bg-shadow};
    --theme-bg-actvie1: #{$light-bg-active1};
    --theme-bg-actvie2: #{$light-bg-active2};

    --theme-text-active: #{$light-text-active};
    --theme-text-light: #{$light-text-light};
    --theme-text-primary: #{$light-text-primary};
    --theme-text-low: #{$light-text-low};
    --theme-text-stress: #{$light-text-stress};

    --theme-border-primary: #{$light-border-primary};
    --theme-border-secondary: #{$light-border-secondary};
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --theme-bg-primary: #{$dark-bg-primary};
    --theme-bg-high: #{$dark-bg-high};
    --theme-bg-shadow: #{$dark-bg-shadow};
    --theme-bg-actvie1: #{$dark-bg-active1};
    --theme-bg-actvie2: #{$dark-bg-active2};

    --theme-text-active: #{$dark-text-active};
    --theme-text-light: #{$dark-text-light};
    --theme-text-primary: #{$dark-text-primary};
    --theme-text-low: #{$dark-text-low};
    --theme-text-stress: #{$dark-text-stress};
  
    --theme-border-primary: #{$dark-border-primary};
    --theme-border-secondary: #{$dark-border-secondary};
  }
}
